<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">    

    <title> Slider in Laptop | RoyalSlider Example</title>

    <meta content="Touch-enabled image gallery and content slider plugin, that focuses on providing great user experience on every desktop and mobile device." name="description">
    <meta name="keywords" content="content slider, gallery, plugin, jquery, banner rotator">
    <meta name="viewport" content="width = device-width, initial-scale = 1.0" />
    <meta name="author" content="Dmitry Semenov">

    <!-- slider JS files -->
    
    <link href="../royalslider/royalslider.css" rel="stylesheet">
    <script  src="../royalslider/jquery-1.8.0.min.js"></script>
    <script src="../royalslider/jquery.royalslider.min.js"></script>
    
    

    
    <!-- syntax highlighter -->
    <script src="../preview-assets/js/highlight.pack.js"></script>
    <script src="../preview-assets/js/jquery-ui-1.8.22.custom.min.js"></script>
    <script> hljs.initHighlightingOnLoad();</script>


    

    <!-- preview-related stylesheets -->
    <link href="../preview-assets/css/reset.css" rel="stylesheet">
    <link href="../preview-assets/css/grid.css" rel="stylesheet">
    <link href="../preview-assets/css/smoothness/jquery-ui-1.8.22.custom.css" rel="stylesheet">
    <link href="../preview-assets/css/github.css" rel="stylesheet">

    <!-- slider stylesheets -->
    
     
        <link href="../royalslider/default-inverted/rs-default-inverted.css" rel="stylesheet">
     
    

    <link href="../preview-assets/css/main.css" rel="stylesheet">

    
    <!-- slider css -->
    <style>
      #slider-in-laptop {
  width: 70%;
  height: 200px;
  padding: 2% 15% 7%;
}
#slider-in-laptop .rsOverflow,
#slider-in-laptop .rsSlide,
#slider-in-laptop .rsVideoFrameHolder,
#slider-in-laptop .rsThumbs {
  background: #151515;
}
#slider-in-laptop .rsPreloader {
  background-image:url(../preloaders/preloader-white.gif);
}
.imgBg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
}
#slider-in-laptop .rsBullets {
  bottom: -25px;
}
.laptopBg {
  position: relative;
  width: 100%;
  height: auto;
}
@media screen and (min-width: 0px) and (max-width: 500px) {
  #slider-in-laptop .rsBullets {
    bottom: -30px;
  }
}

    </style>
    
  </head>
  <body >
  <header  id="main-header" class="clearfix">  
    <div  class="page wrapper"> 
       <div class="col span_6">
         <a id="logo" href="#">Royal&thinsp;Slider</a>
         <nav>
            <a href="http://dimsemenov.com/plugins/royal-slider/documentation/?s=dp">Documentation Online</a>
            <a href="http://dimsemenov.com/plugins/royal-slider/build/?s=dp">Build Tool</a>
         </nav>
       </div>
    </div>
  </header>
  <div  class="page wrapper">    
    <div class="row clearfix">
      <div id="page-navigation" class="col span_6"> 
            
          <div class="left page-nav-item"> 
                  <a href="../gallery-with-deeplinking/" title="Previous Example: 
  Gallery with Deep Linking">← Gallery with Deep Linking</a> 
          </div> 
           
           
          <div class="right page-nav-item"> 
          
                  <a href="../gallery-vertical-fade/" title="Next Example: 
  Gallery with Fade and Vertical Thumbs">Gallery with Fade and Vertical Thumbs → </a> 
          
          </div> 
           
      </div> 
    </div>

    <!-- slider code start -->
      <div class="row clearfix">
  <div class="col span_4 fwImage">
    <div class="royalSlider-preview laptopBg">
      <img src="../img/laptop.png" class="imgBg" width="707" height="400" />
      <div id="slider-in-laptop" class="royalSlider rsDefaultInv">
        <img src="../img/full-width/medium/1.jpg" />
        <img src="../img/full-width/medium/2.jpg"  data-rsVideo="https://vimeo.com/45778774" />
        <img src="../img/full-width/medium/3.jpg" />
        <img src="../img/full-width/medium/4.jpg" />
      </div>
    </div>
  </div>

  <div class="col span_2">
      <h1>Slider in laptop</h1>
      <p>Simple variation of image slider with bullets is used, image behind scales with slider automatically.</p>

      <p>Laptop mockup by <a href="http://dribbble.com/mbarvian">Maxwell Barvian</a>, photography by <a href="http://www.flickr.com/photos/gilderic/">Gilderic</a>.</p>
      <p>Buttons controlled by API:</p>
      <button id="slider-prev">Prev</button><button id="slider-next">Next</button>
    </div>
</div>

  <!-- You don't need this part of code -->
  <div class="row clearfix">
    <div class="tabs col span_6">
    <ul>
        <li><a href="#js">JavaScript</a></li>
        <li><a href="#css">CSS</a></li>
        <li><a href="#html">HTML</a></li>
    </ul>
    <div id="js"><pre><code></code></pre></div>
    <div id="css"><pre><code>#slider-in-laptop {
  width: 70%;
  height: 200px;
  padding: 2% 15% 7%;
}
#slider-in-laptop .rsOverflow,
#slider-in-laptop .rsSlide,
#slider-in-laptop .rsVideoFrameHolder,
#slider-in-laptop .rsThumbs {
  background: #151515;
}
#slider-in-laptop .rsPreloader {
  background-image:url(../preloaders/preloader-white.gif);
}
.imgBg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
}
#slider-in-laptop .rsBullets {
  bottom: -25px;
}
.laptopBg {
  position: relative;
  width: 100%;
  height: auto;
}
@media screen and (min-width: 0px) and (max-width: 500px) {
  #slider-in-laptop .rsBullets {
    bottom: -30px;
  }
}
</code></pre></div>
    <div id="html"><pre id="html-code"><code></code></pre></div>
    </div>
  </div>
  <script>
    jQuery(document).ready(function(e) {
        var code = $('#html-code code');
        if(code.is(':empty')) {
          var rsCode = $('.royalSlider-preview');
          if(!rsCode.length) {
              rsCode = $('.royalSlider');
          }
          rsCode = rsCode.clone().removeClass('royalSlider-preview').wrap('<div></div>').parent().html();
          rsCode = htmlencode(rsCode);
          code.html(rsCode);
        }
        $('#js code').html( htmlencode($('#addJS').html()) );
        $( ".tabs" ).tabs();
    });
    function htmlencode(str) {
      if(str) {
         return str.replace(/[&<>"']/g, function($0) {
            return "&" + {"&":"amp", "<":"lt", ">":"gt", '"':"quot", "'":"#39"}[$0] + ";";
        });
      }
    }   
  </script>
  <div class="row clearfix">
    <h2>List of Starter Templates</h2>
  <ul id="templates-list" class="col span_6">
  
  <li><a href="../content-slider/"><img width="341" height="250" src="../img/previews/content-slider.jpg" /><h3>HTML Content Slider</h3></a></li>
  
  <li><a href="../video-gallery/"><img width="341" height="250" src="../img/previews/video-gallery.jpg" /><h3>Video Gallery</h3></a></li>
  
  <li><a href="../gallery/"><img width="341" height="250" src="../img/previews/gallery.jpg" /><h3>Image Gallery with Fullscreen Option</h3></a></li>
  
  <li><a href="../visible-nearby/"><img width="341" height="250" src="../img/previews/visible-nearby.jpg" /><h3>Gallery with Visible Nearby Images</h3></a></li>
  
  <li><a href="../animated-blocks/"><img width="341" height="250" src="../img/previews/animated-blocks.jpg" /><h3>Slider with Animated Blocks</h3></a></li>
  
  <li><a href="../full-width/"><img width="341" height="250" src="../img/previews/fullwidth.jpg" /><h3>Full Width Slider</h3></a></li>
  
  <li><a href="../slider-in-lightbox/"><img width="341" height="250" src="../img/previews/lightbox.jpg" /><h3>Slider in Lightbox</h3></a></li>
  
  <li><a href="../simple-vertical/"><img width="341" height="250" src="../img/previews/simple-vertical.jpg" /><h3>Simple Vertical Slider</h3></a></li>
  
  <li><a href="../gallery-vertical-fade/"><img width="341" height="250" src="../img/previews/gallery-fade.jpg" /><h3>Gallery with Fade and Vertical Thumbs</h3></a></li>
  
  <li><a href="../slider-in-laptop/"><img width="341" height="250" src="../img/previews/slider-in-laptop.jpg" /><h3>Slider in Laptop</h3></a></li>
  
  <li><a href="../gallery-with-deeplinking/"><img width="341" height="250" src="../img/previews/deeplinking.jpg" /><h3>Gallery with Deep Linking</h3></a></li>
  
  </ul>
</div>
  <footer class="row clearfix" id="main-footer">
    <div class="col span_6">
      <nav><a href="http://dimsemenov.com/subscribe.html?s=sb">Email Newsletter</a><a href="http://twitter.com/dimsemenov">Twitter</a><a href="mailto:diiiimaaaa@gmail.com?subject=RoyalSlider bug">Report Bug</a><a href="http://dimsemenov.com/plugins/royal-slider/support/">Contact support</a></nav>
      <p class="copy">© 2011-2012 <a href="http://dimsemenov.com">Dmitry Semenov</a></p>
    </div>
  </footer>
   <!-- tabs & footer end /// --> 
   
  
    <script id="addJS">jQuery(document).ready(function($) {
  var rsi = $('#slider-in-laptop').royalSlider({
    autoHeight: false,
    arrowsNav: false,
    fadeinLoadedSlide: false,
    controlNavigationSpacing: 0,
    controlNavigation: 'bullets',
    imageScaleMode: 'fill',
    imageAlignCenter:true,
    loop: false,
    loopRewind: false,
    numImagesToPreload: 6,
    keyboardNavEnabled: true,
    autoScaleSlider: true,  
    autoScaleSliderWidth: 486,     
    autoScaleSliderHeight: 315
  }).data('royalSlider');
  $('#slider-next').click(function() {
    rsi.next();
  });
  $('#slider-prev').click(function() {
    rsi.prev();
  });
});
</script>
  
  </div>
  </body>
</html>
